<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { LMap, LTileLayer, LGeoJson, LControl } from '@vue-leaflet/vue-leaflet'
import 'leaflet/dist/leaflet.css'
import { loadOfflineTiles } from '../utils/offlineTile'
import { useMapStore } from '../stores/mapStore'

const mapStore = useMapStore()
const mapRef = ref()

onMounted(async () => {
  await mapStore.loadGeoJsonData()
  await loadOfflineTiles()
})
</script>

<template>
  <div class="map-container">
    <l-map
      ref="mapRef"
      :zoom="8"
      :center="[31.22, 112.42]"
      :options="{ zoomControl: false }"
    >
      <!-- 离线瓦片图层 -->
      <l-tile-layer
        url="/assets/map-data/tile/{z}/{x}/{y}.png"
        :attribution="'湖北省离线地图'"
        layer-type="base"
      />
      
      <!-- 湖北省边界及县级区域 -->
      <l-geo-json
        v-if="mapStore.geoJsonData"
        :geojson="mapStore.geoJsonData"
        :options="{
          style: mapStore.areaStyle,
          onEachFeature: mapStore.onEachFeature
        }"
      />
      
      <l-control position="topright">
        <div class="map-controls">
          <!-- 缩放控制等 -->
        </div>
      </l-control>
    </l-map>
  </div>
</template>

<style scoped>
.map-container {
  height: 100vh;
  width: 100%;
}
</style>